<script setup lang='ts'>
import { computed } from '@vue/reactivity';
import { ref, watchEffect } from 'vue';
import { updateFlagApi } from '../api/product'

//接收父组件传来的数据 
const props = defineProps({
    data: Array,
    isSale: Boolean,
    isSecKill: Boolean,
    isRecommend: Boolean
})

let list: any = ref(props.data)
// 监听是否推荐、秒杀的变化
watchEffect(() => {
    list.value.forEach((item: any) => {
        item.issale = item.issale ? true : false
        item.isrecommend = item.isrecommend ? true : false
        item.isseckill = item.isseckill ? true : false
    })
})

//删除部分的操作 
const handleDelete = (index: number, row: any) => {
    // list.value = bannerData.value.filter((item: any) => item.bannerid != row.bannerid)
    // removeBannerApi(row.bannerid).then(res => {
    //     console.log(res);
    // })
    // console.log('row', row.bannerid)
}

// 分页
// 1)、每页10条数据。
let pageSize = ref(10);
// 2)、当前页码：
let currentPage = ref(1);

let data = computed(() => list.value.slice(pageSize.value * (currentPage.value - 1), pageSize.value * currentPage.value))

// 修改是否秒杀
const changeSecKill = (flag: any, proid: string) => {
    updateFlagApi({
        proid,
        type: 'isseckill',
        flag
    })
}

// 修改是否推荐
const changeRecommend = (flag: any, proid: string) => {
    updateFlagApi({
        proid,
        type: 'isrecommend',
        flag
    })
}

</script>
<template>
    <div class="container">
        <el-table :data="data" style="width: 100%" height="700px">
            <el-table-column label="序号" min-width="60px" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="图片" min-width="104px" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <img :src="scope.row.img1" style="width: 80px;height:80px">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="proname" label="名称" min-width="200px" align="center" />
            <el-table-column prop="brand" label="品牌" align="center" min-width="100px" />
            <el-table-column prop="category" label="分类" align="center" />
            <el-table-column prop="originprice" label="原价" align="center" min-width="100px" />
            <el-table-column prop="discount" label="折扣" align="center" />
            <el-table-column prop="sales" label="销量" align="center" min-width="90px" />
            <el-table-column label="是否售卖" align="center" v-if="isSale">
                <template #default="scope">
                    <el-switch v-model="scope.row.issale" @change="" />
                </template>
            </el-table-column>
            <el-table-column prop="zip" label="是否秒杀" align="center" v-if="isSecKill">
                <template #default="scope">
                    <el-switch v-model="scope.row.isseckill"
                        @change="(flag: any) => changeSecKill(flag, scope.row.proid)" />
                </template>
            </el-table-column>
            <el-table-column prop="zip" label="是否推荐" align="center" v-if="isRecommend">
                <template #default="scope">
                    <el-switch v-model="scope.row.isrecommend"
                        @change="(flag: any) => changeRecommend(flag, scope.row.proid)" />
                </template>
            </el-table-column>

            <el-table-column label="操作" min-width="180" align="center">
                <template #default="scope">
                    <el-button type="primary" plain @click="handleDelete(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination :hide-on-single-page="true" :pager-count="5" background layout="prev, pager, next"
            :total="list.length" v-model:page-size="pageSize" v-model:current-page="currentPage" />
    </div>
</template>
<style scoped>
.el-pagination {
    margin-top: 20px;
    float: right;
}
</style>
